<!--
  * 时间：2024/11/21
  * 作者：刘岩
  * 描述：实时密度
-->
<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true">
      <el-form-item label="密度统计组" porp="regionItems">
        <el-select
          multiple
          collapse-tags
          placeholder="请选择密度统计组"
          v-model="queryParams.countGroupId"
        >
          <el-option
            v-for="item in countGroupGroupsPage"
            :value="item.groupId"
            :label="item.groupName"
            :key="item.groupId"
          ></el-option>
        </el-select>
      </el-form-item>
      <span class="btn" @click="typeToggle('hourly')" :class="{'btn-active': queryParams.granularity === 'hourly'}">小时</span>
      <span class="btn" @click="typeToggle('daily')" :class="{'btn-active': queryParams.granularity === 'daily'}">日</span>
      <span class="btn" @click="typeToggle('monthly')" :class="{'btn-active': queryParams.granularity === 'monthly'}">月</span>
      <span class="btn last-btn" @click="typeToggle('yearly')" :class="{'btn-active': queryParams.granularity === 'yearly'}">年</span>
      <!--小时-->
      <template v-if="queryParams.granularity === 'hourly'">
        <el-form-item>
          <el-date-picker
            v-model="queryParams.date"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :clearable="false"
          >
          </el-date-picker>
        </el-form-item>
      </template>
      <!--日选项-->
      <template v-if="queryParams.granularity === 'daily'">
        <el-form-item>
          <el-date-picker
            v-model="queryParams.date"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :clearable="false"
          >
          </el-date-picker>
        </el-form-item>
      </template>
      <template v-if="queryParams.granularity === 'monthly'">
        <el-form-item>
          <el-date-picker
            v-model="queryParams.date"
            type="monthrange"
            range-separator="至"
            start-placeholder="开始月份"
            end-placeholder="结束月份"
            :clearable="false"
          >
          </el-date-picker>
        </el-form-item>
      </template>
      <template v-if="queryParams.granularity === 'yearly'">
        <el-form-item>
          <year-range
            :yearRange="queryParams.date"
            :key="`${queryParams.date[0]}_${queryParams.date[1]}`"
            @yearChanged="handleYearChanged"
          >
          </year-range>
        </el-form-item>
      </template>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <div class="header">
      <img class="toggle-img" src="@/assets/flow/line.png" @click="echartsTypeToggle('line')" alt="">
      <img class="toggle-img" src="@/assets/flow/list.png" @click="echartsTypeToggle('list')" alt="">
<!--      <span class="export">-->
<!--        <i class="el-icon-download"></i>-->
<!--        导出-->
<!--      </span>-->
    </div>
    <div class="container">
      <density-line v-if="type === 'line'" :xData="echartsX" :yData="echartsY"></density-line>
      <list v-if="type === 'list'" :tableList="tableList"></list>
    </div>
  </div>
</template>

<script>
import DensityLine from '@/views/passengerFlow/realTimeDensity/components/densityLine';
import List from './components/list';
import YearRange from '@/views/passengerFlow/components/yearRange'
import { countGroupGroupsPage } from '@/api/flow'
import { getPassengerDensityGroups } from '@/api/realTimeDensity'

export default {
  name: 'realTimeDensity',
  components: {
    DensityLine,
    List,
    YearRange
  },
  data () {
    return {
      // 统计组数据
      countGroupGroupsPage: [],
      // 查询参数
      queryParams: {
        countGroupId: [], // 统计组ID
        granularity: 'hourly',
        date: [],
        startTime: '', // 开始日期
        endTime: '', // 结束日期
      },
      // X轴数据
      echartsX: [],
      // Y轴数据
      echartsY: [],
      // 列表数据
      tableList: [],
      type: 'line' // 图表类型
    }
  },
  created() {
    this.getCountGroupGroupsPage();
    // 处理时间
    this.queryParams.date = [this.$dayjs().startOf('day').format(), this.$dayjs().endOf('day').format()];
    this.queryParams.startTime = this.$dayjs().startOf('day').format();
    this.queryParams.endTime = this.$dayjs().endOf('day').format();
  },
  methods: {
    /**
     * 时间：2024/11/28
     * 作者：刘岩
     * 功能：查询密度统计组
     */
    getCountGroupGroupsPage() {
      countGroupGroupsPage({
        pageNo: 1,
        pageSize: 999,
        groupType: 2
      }).then(res => {
        // 转换数据
        this.countGroupGroupsPage = JSON.parse(res.msg).data.list;
        this.queryParams.countGroupId.push(this.countGroupGroupsPage[0].groupId);
        this.getList(JSON.parse(JSON.stringify(this.queryParams))); // 查询图表数据
      });
    },
    /**
     * 时间：2024/11/28
     * 作者：刘岩
     * 功能：查询条件切换
     */
    typeToggle(type) {
      this.queryParams.granularity = type;
      // 处理查询数据
      let form = JSON.parse(JSON.stringify(this.queryParams));
      switch (type) {
        // 小时
        case 'hourly':
          this.queryParams.date = [this.$dayjs().startOf('day').format(), this.$dayjs().endOf('day').format()];
          form.startTime = this.$dayjs().startOf('day').format();
          form.endTime = this.$dayjs().endOf('day').format();
          break;
        // 日
        case 'daily':
          this.queryParams.date = [this.$dayjs().subtract(29, 'day').startOf('day').format(), this.$dayjs().format()];
          form.startTime = this.$dayjs().subtract(29, 'day').startOf('day').format(); // 开始日期
          form.endTime = this.$dayjs().format(); // 结束日期
          break;
        // 月
        case 'monthly':
          this.queryParams.date = [
            this.$dayjs().subtract(10, 'month').startOf('month').format(),
            this.$dayjs().subtract(0, 'month').endOf('month').format()
          ];
          form.startTime = this.$dayjs().subtract(10, 'month').startOf('month').format();
          form.endTime = this.$dayjs().subtract(0, 'month').endOf('month').format();
          break;
        // 年
        case 'yearly':
          this.queryParams.date = [
            this.$dayjs().subtract(9, 'year').startOf('year').format(),
            this.$dayjs().subtract(0, 'year').endOf('year').format()
          ];
          form.startTime = this.$dayjs().subtract(9, 'year').startOf('year').format();
          form.endTime = this.$dayjs().subtract(0, 'year').endOf('year').format();
          break;
      }
      this.getList(form);
    },
    handleYearChanged(val) {
      this.queryParams.date = val;
    },
    /** 搜索按钮操作 */
    handleQuery() {
      let form = JSON.parse(JSON.stringify(this.queryParams));
      // 处理查询数据
      switch (this.queryParams.granularity) {
        // 小时
        case 'hourly':
          form.startTime = this.$dayjs(this.queryParams.date[0]).format();
          form.endDate = this.$dayjs(this.queryParams.date[1]).format();
          break;
        // 日
        case 'daily':
          form.startTime = this.$dayjs(this.queryParams.date[0]).format();
          form.endDate = this.$dayjs(this.queryParams.date[1]).format();
          break;
        // 月
        case 'monthly':
          form.startTime = this.$dayjs(this.queryParams.date[0]).startOf('month').format();
          form.endTime = this.$dayjs(this.queryParams.date[1]).endOf('month').format();
          break;
        // 年
        case 'yearly':
          form.startTime = this.$dayjs(this.queryParams.date[0]).startOf('year').format();
          form.endTime = this.$dayjs(this.queryParams.date[1]).endOf('year').format();
          break;
      }
      this.getList(form);
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams.date = [this.$dayjs().startOf('day').format(), this.$dayjs().endOf('day').format()];
      this.queryParams.granularity = 'hourly';
      this.handleQuery();
    },
    /**
     * 时间：2024/11/26
     * 作者：刘岩
     * 功能：查询图表数据
     */
    getList(form) {
      form.countGroupId = form.countGroupId.join(',');
      getPassengerDensityGroups(form).then(res => {
        let resp = JSON.parse(res.msg);
        if (resp.msg === 'success') {
          this.tableList = [];
          let data = resp.data;
          let xData = []; // X轴数据
          let yData = []; // Y轴数据
          data.forEach(item => {
            let time = '';
            // 处理时间格式
            switch (this.queryParams.granularity) {
              // 小时
              case 'hourly':
                time = this.$dayjs(item.statTime).format('YYYY-MM-DD HH:mm:ss');
                break;
              // 日
              case 'daily':
                time = this.$dayjs(item.statTime).format('YYYY-MM-DD');
                break;
              // 月
              case 'monthly':
                time = this.$dayjs(item.statTime).format('YYYY-MM');
                break;
              // 年
              case 'yearly':
                time = this.$dayjs(item.statTime).format('YYYY');
                break;
            }
            xData.push(time);
            yData.push(item.density);
            this.tableList.push({
              density: item.density,
              time: time
            });
          });
          this.echartsX = xData;
          this.echartsY = yData;
        } else {
          this.$message.warning(resp.msg);
        }
      });
    },
    /**
     * 时间：2024/11/22
     * 作者：刘岩
     * 功能：切换图表
     */
    echartsTypeToggle(type) {
      this.type = type;
    }
  }
}
</script>

<style scoped lang="scss">
.app-container {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 84px);
  ::v-deep.el-form {
    .btn {
      display: inline-block;
      width: 60px;
      height: 35px;
      line-height: 35px;
      text-align: center;
      cursor: pointer;
      font-size: 14px;
      border: 1px solid #e5e5e5;
      margin-bottom: 10px;
      &:nth-child(1n) {
        border-right: none;
      }
    }
    .last-btn {
      border-right: 1px solid #e5e5e5 !important;
      margin-right: 10px;
    }
    .btn-active {
      border: 1px solid #00afff !important;
    }
  }
  .header {
    display: flex;
    align-items: center;
    justify-content: right;
    .toggle-img {
      width: 22px;
      cursor: pointer;
      margin-right: 10px;
    }
    .export {
      font-size: 16px;
      color: #cdcdcd;
      cursor: pointer;
    }
  }
  .container {
    flex: 1;
    display: flex;
    flex-direction: column;
  }
}
</style>
